<template>
  <div>
    <!-- 查询窗口 -->
    <el-form
      ref="queryForm"
      :model="queryParams"
      class="form"
    >
      <!-- 第一行 -->
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item
            size="small"
            prop="purchaseNo"
            label-width="80px"
          >
            <label
              slot="label"
            >{{$t('product_purchasemanage_purchasemanage_174')}}</label>
            <el-input
              v-model="queryParams.purchaseNo"
              clearable
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item
            size="small"
            prop="uid"
            label-width="80px"
          >
            <label
              slot="label"
            >{{$t('product_purchasemanage_purchasemanage_175')}}</label>
            <el-input
              v-model="queryParams.uid"
              clearable
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item
            :label="$t('product_purchasemanage_purchasemanage_176')"
            size="small"
            prop="createTime"
            label-width="80px"
          >
            <el-date-picker
              v-model="createTime"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-:separator="$t('product_purchasemanage_purchasemanage_177')"
              start-:placeholder="$t('product_purchasemanage_purchasemanage_178')"
              end-:placeholder="$t('product_purchasemanage_purchasemanage_179')"
              style="width: 350px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item size="small">
            <el-button
              type="primary"
              class="query"
              @click="handleQuery"
            >{{$t('product_purchasemanage_purchasemanage_180')}}</el-button>
            <el-button
              type="primary"
              style="width: 60px; margin-left: 40px"
              @click="resetQuery"
            >{{$t('product_purchasemanage_purchasemanage_181')}}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 数据展示Table -->
    <el-table
      v-loading="loading"
      border
      :data="dataList"
      style="border: 1px solid rgb(211 211 211); margin-left: 20px; width: 96%"
    >
      <el-table-column
        type="index"
        :label="$t('product_purchasemanage_purchasemanage_182')"
        width="80"
        align="center"
      />
      <el-table-column
        :label="$t('product_purchasemanage_purchasemanage_174')"
        align="center"
        width="280"
        prop="purchaseNo"
      />
      <el-table-column
        :label="$t('product_purchasemanage_purchasemanage_175')"
        align="center"
        width="110"
        prop="createBy"
      />
      <el-table-column
        :label="$t('product_purchasemanage_purchasemanage_183')"
        align="center"
        width="190"
        prop="quantity"
      />
      <el-table-column
        :label="$t('product_purchasemanage_purchasemanage_184')"
        align="center"
        prop="createTimeString"
      />
      <el-table-column
        :label="$t('product_purchasemanage_purchasemanage_185')"
        align="center"
        width="150"
      >
        <template slot-scope="scope">
          <el-link
            type="warning"
            @click="handleItemDetails(scope.row)"
          >{{$t('product_purchasemanage_purchasemanage_186')}}</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页加载 -->
    <el-pagination
      :current-page="showAllParams.current"
      :page-sizes="[5, 10, 20]"
      :page-size="showAllParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 采购订单详情弹窗，默认不显示 -->
    <el-dialog
      :title="$t('product_purchasemanage_purchasemanage_187')"
      :visible.sync="itemListOpen"
      width="800px"
      append-to-body
    >
      <el-table
        border
        :data="purchaseItemList"
        style="
          border: 1px solid rgb(211 211 211);
          margin-left: 20px;
          width: 96%;
        "
        row-key="id"
      >
        <el-table-column
          :label="$t('product_purchasemanage_purchasemanage_182')"
          align="center"
          type="index"
        />
        <el-table-column
          :label="$t('product_purchasemanage_purchasemanage_188')"
          align="center"
          prop="productSn"
        />
        <el-table-column
          show-overflow-tooltip
          :label="$t('product_purchasemanage_purchasemanage_189')"
          align="center"
          prop="productName"
        />
        <el-table-column
          :label="$t('product_purchasemanage_purchasemanage_190')"
          align="center"
          prop="imageUrl"
          width="150"
        >
          <template slot-scope="scope">
            <img
              v-if="scope.row.imageUrl != null"
              :src="scope.row.imageUrl"
              alt="Product Image"
              style="width: 120px; height: auto"
            >
            <span v-else>{{$t('product_purchasemanage_purchasemanage_191')}}</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          :label="$t('product_purchasemanage_purchasemanage_192')"
          align="center"
          prop="color,size"
        >
          <template slot-scope="scope">
            [{{ scope.row.color }},{{ scope.row.size }}]
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('product_purchasemanage_purchasemanage_193')"
          align="center"
          prop="quantity"
        />
      </el-table>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="itemListOpen = false">{{$t('product_purchasemanage_purchasemanage_194')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { 
  queryPurchaseOrder, 
  getPurchaseOrderDetail 
} from "@/api/purchase";
export default {
  data() {
    return {
      loading: false,
      // 查询参数
      queryParams: {
        current: 1,
        pageSize: 5,
        purchaseNo: "",
        uid: "",
        startTime: " ",
        endTime: " ",
      },
      // 查询时间数组
      createTime: [],
      // 展示所有支付参数
      showAllParams: {
        current: 1,
        pageSize: 10,
      },
      dataList: [],
      // 售后数据总条数
      total: 0,
      itemListOpen: false,
      purchaseItemList: [],
    };
  },
  created() {
    this.getAllPurchaseOrder();
  },
  methods: {
    getAllPurchaseOrder() {
      this.loading = true;
      queryPurchaseOrder(this.showAllParams).then((response) => {
        // console.log(response.data);
        setTimeout(() => {
            this.dataList = response.data.records;
            // console.log(this.dataList);
            this.loading = false;
            this.total = Number(response.data.total);
          }, 300); 
        });
    },
    // 处理分页操作
    handleSizeChange(val) {
      this.showAllParams.pageSize = val
      this.getAllPurchaseOrder()

    },
    handleCurrentChange(val) {
      this.showAllParams.current = val
      this.getAllPurchaseOrder()
    },
    //处理查询售后记录
    handleQuery() {
      this.loading = true;
      const queryParams = { ...this.queryParams };
      queryParams.startTime = this.createTime[0];
      queryParams.endTime = this.createTime[1];
      queryPurchaseOrder(queryParams).then((response) => {
        this.dataList = response.data.records;
        this.loading = false;
      });
    },
    //清空查询框
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.createTime = [];
      this.getAllPurchaseOrder()
    },
    //处理查询采购订单相关商品详情
    handleItemDetails(row) {
      getPurchaseOrderDetail(row.id).then((response) => {
        // console.log(response.data);
        this.purchaseItemList = response.data;
        this.itemListOpen = true;
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.form {
  border: 2px dashed rgb(211, 211, 211);
  padding: 20px;
  padding-bottom: 0px;
  margin: 10px 20px 20px 20px;
}
.query {
  margin-left: 30px;
  width: 60px;
}
.page {
  margin-top: 5px;
  margin-left: 280px;
}
</style>
